<template>
  <div class="directorys">
    <!-- 卡片试图 -->
    <el-card>
      <!-- 搜索 -->
      <el-row :gutter="15">
        <!-- 目录名称-->
        <el-col :span="2" class="course_name">
          <div>目录名称</div>
        </el-col>
        <el-col :span="4">
          <el-input v-model="cataloguename"></el-input>
        </el-col>
        <!-- 状态 -->
        <el-col :span="2" class="course_name">
          <div class="zt">状态</div>
        </el-col>
        <el-col :span="4" class="directorys_input2">
          <el-select v-model="region" placeholder="请选择活动区域">
            <el-option label="启用" value="1"></el-option>
            <el-option label="静用" value="0"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button @click="empty">清除</el-button>
        </el-col>
        <el-col :span="3" class="seek">
          <el-button type="primary" @click="cataloguesearch" class="ss1">搜索</el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="success" icon="el-icon-edit" size="small" class="ss" @click="addcatalogpop">新增目录</el-button>
        </el-col>
      </el-row>
      <!-- 显示多少数据 -->
      <div class="datas">
        <i class="el-alert__icon el-icon-info"></i>
        数据一共 {{tableData.length}} 条
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type=index width="50">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180">
        </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者">
        </el-table-column>
        <el-table-column label="创建日期">{{tiem}}
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div>
              {{ scope.row.state == 1? '以启用':'已禁用'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="text" @click="operationstate(scope.row)">禁用</el-button>
            <el-button type="text">修改</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /表格 -->
    </el-card>
    <!-- 新增文章弹出层 -->
    <el-dialog title="新增目录" :visible.sync="addcataloguelogVisible" width="26%" :before-close="handleClose" @close="addclose">
      <!-- 表单 -->
      <el-form :model="catalogueruleForm" ref="addruleForm" label-width="100px" class="demo-ruleForm" :rules="rules">
        <el-form-item label="所属学科">
          <el-select v-model="catalogueruleForm.catalogvalue" placeholder="请选择" class="catalogueinput">
            <el-option v-for="item in catalogueruleForm.options" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="name">
          <el-input v-model="catalogueruleForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addcataloguelogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addcatalogue" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <!--/ 新增文章弹出层 -->
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { getData } from '@/api/user'
export default {
  name: 'directorys',
  props: {},
  components: {
  },
  data () {
    return {
      cataloguename: '',
      tiem: '',
      region: '',
      tableData: [],
      catalogueruleForm: {
        name: '',
        // 选择器
        options: [],
        catalogvalue: ''
      },
      // 增加目录的显示影藏
      addcataloguelogVisible: false,
      // 校验规则
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getData()
  },
  mounted () {},
  methods: {
    // 渲染页面
    async getData () {
      try {
        const data = await getData(this.tableData)
        console.log(data)
        this.tableData = data.data.items
        this.tiem = dayjs(this.tableData.addDate).format('YYYY-MM-DD hh:mm:ss')
      } catch (err) {
        this.$message.error('数据请求失败')
      }
    },
    // 搜索
    async cataloguesearch () {
      if (this.cataloguename === '' && this.region === '') {
        this.$message({
          message: '请输入搜索内容',
          duration: 500,
          type: 'error'
        })
        return
      }
      try {
        const directoryName = this.cataloguename
        const state = this.region
        const data = await this.$http.get('/directorys', {
          params: {
            directoryName: directoryName,
            state: state
          }
        })
        console.log(data)
        this.tableData = data.data.items
      } catch (err) {
        this.$message.error('数据请求失败')
      }
    },
    // 开关弹出层
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    // 监听添加学科弹框的关闭事件
    addclose () {
      this.$refs.addruleForm.resetFields()
      this.catalogueruleForm.catalogvalue = ''
    },
    // 新增目录 弹框
    async addcatalogpop () {
      this.addcataloguelogVisible = true
      try {
        const data = await this.$http.get('/subjects/simple')
        console.log(data)
        this.catalogueruleForm.options = data.data
      } catch (err) {
        this.$message.error('数据请求失败')
      }
    },
    // 新增目录发送请求
    async addcatalogue () {
      const subjectID = this.catalogueruleForm.catalogvalue
      const directoryName = this.catalogueruleForm.name
      console.log(subjectID)
      console.log(directoryName)
      try {
        const data = await this.$http.post('/directorys', {
          subjectID: subjectID,
          directoryName: directoryName
        })
        console.log(data)
        this.gettingdata()
        this.addcataloguelogVisible = false
      } catch (err) {
        this.$message.error('请输入内容')
      }
    },
    // 清空表单
    empty () {
      this.region = ''
      this.cataloguename = ''
    },
    // 禁用启用
    async operationstate (row) {
      // console.log(row.id)
      console.log(row.state)
      try {
        const data = await this.$http.post(`/directorys/${row.id}/${row.state}`,
          {
            id: row.id,
            state: row.state
          })
        console.log(data)
      } catch (err) {
        this.$message.error('数据请求失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.course_name {
  width: 80px;
  color: #606266;
  line-height: 40px;
  font-size: 16px;
  vertical-align: middle;
  font-weight: bold;
  margin-right: -20px;
  width: 100px;
}

.datas {
  margin-top: 10px;
  background-color: #f4f4f5;
  color: #909399;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  .el-alert__icon {
    font-size: 16px;
  }
}
/deep/ .el-dialog {
  border-radius: 10px;

  .el-dialog__header {
    background-color: #409eff;
    border-radius: 10px 10px 0 0;
    line-height: 24px;
    .el-dialog__title {
      color: #fff;
    }
  }
  .el-form-item__label {
    color: #606266;
    font-size: 14px;
    font-weight: 900;
    padding: 0 30px 0 0;
  }
  .el-input__inner {
    height: 35px;
  }
}
.zt {
  margin-left: 35px;
}
/deep/ .directorys_input2 {
  margin-left: 10px;
}
/deep/ .ss1 {
  position: relative;
  left: -100px
}
/deep/ .ss {
  position: relative;
  right: -300px
}
/deep/ .catalogueinput {
  width: 255px
}
</style>
